<cly-main>
    <div class="bu-level bu-my-4">
        <div class="bu-level-left">
            <span class="text-big font-weight-bold">Consent History for </span>
            <cly-select-x class="bu-ml-3 bu-mr-3" :width="300" :borderless="true" :adaptiveLength="true"
                :auto-commit="true" :hide-default-tabs="true" :arrow="false" :hide-all-options-tab="true" :options="filter1"
                v-model="selectedfilterforConsent">
            </cly-select-x>
            <span class="text-big font-weight-bold"> and </span>
            <cly-select-x class="bu-ml-3 bu-mr-3" :width="300" :borderless="true" :auto-commit="true"
                :adaptiveLength="true" :arrow="false" :hide-default-tabs="true" :hide-all-options-tab="true" :options="filter0"
                v-model="selectedfilterforMetrics">
            </cly-select-x>
        </div>
        <div class="bu-level-right">
            <cly-date-picker-g type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date">
            </cly-date-picker-g>
        </div>
    </div>
    <cly-section class="cly-vue-compliance__consent_history cly-vue-complaince__hub_style_widthzero">
        <cly-datatable-n :data-source="consentHistoryTableSource" :default-sort="{prop: 'ts', order: 'descending'}" ref="table" @row-click="tableRowClickHandler" row-class-name="bu-is-clickable">
            <template v-slot="scope">
                <el-table-column fixed type="expand">
                    <template slot-scope="props">
                        <div class="bu-level bu-mb-4 cly-vue-compliance__consent_history_expanded_column">
                            <div class="bu-level-left text-medium font-weight-bold">Device ID</div>
                            <div style="width: 80%;" class="bu-level-right">
                                <p style="width: 100%;">{{props.row.device_id}}</p>
                            </div>
                        </div>
                        <div v-if="props.row.optin.length > 0"
                            class="bu-level bu-mb-4 cly-vue-compliance__consent_history_expanded_column">
                            <div class="bu-level-left text-medium font-weight-bold">{{i18n("consent.opt-i")}}</div>
                            <div style="width: 80%;" class="bu-level-right">
                                <p style="width: 100%;">
                                    {{props.row.optin.join(',')}}
                                </p>
                            </div>
                        </div>
                        <div v-if="props.row.optout.length > 0"
                            class="bu-level bu-mb-4 cly-vue-compliance__consent_history_expanded_column">
                            <div class="bu-level-left text-medium font-weight-bold">{{i18n("consent.opt-o")}}</div>
                            <div style="width: 80%;" class="bu-level-right">
                                <p style="width: 100%;">
                                    {{props.row.optout.join(',')}}
                                </p>
                            </div>
                        </div>
                        <div class="bu-level bu-mb-4 cly-vue-compliance__consent_history_expanded_column">
                            <div class="bu-level-left text-medium font-weight-bold">Device</div>
                            <div style="width: 80%;" class="bu-level-right">
                                <p style="width: 100%;">
                                    {{props.row.d + "(" + props.row.p + " " + props.row.pv + ")"}}
                                </p>
                            </div>
                        </div>
                        <div class="bu-level cly-vue-compliance__consent_history_expanded_column">
                            <div class="bu-level-left text-medium font-weight-bold">App version</div>
                            <div style="width: 80%;" class="bu-level-right">
                                <p style="width: 100%;">
                                    {{props.row.av}}
                                </p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed width="250" sortable="custom" prop="device_id" label="ID">
                </el-table-column>
                <el-table-column sortable="custom" prop="uid" label="UID">
                </el-table-column>
                <el-table-column sortable="custom" width="220px" label="CHANGES">
                    <template v-slot="rowScope">
                        <div>
                            <p v-if="rowScope.row.type.includes('i')">{{i18n("consent.opt-i")}}</p>
                            <p v-if="rowScope.row.type.includes('o')">{{i18n("consent.opt-o")}} </p>
                        </div>

                    </template>

                </el-table-column>
                <el-table-column width="250" sortable="custom" label="CONSENT">
                    <template v-slot="rowScope">
                        <div>
                            <p v-if="rowScope.row.optin.length > 0">{{i18n("consent.opt-i")}} for {{rowScope.row.optin.length}} feature(s)
                            </p>
                            <p v-if="rowScope.row.optout.length > 0">{{i18n("consent.opt-o")}} from {{rowScope.row.optout.length}}
                                feature(s)</p>
                        </div>

                    </template>

                </el-table-column>
                <el-table-column width="230" sortable="custom" prop="ts" label="TIME">
                    <template v-slot="rowScope">
                        {{rowScope.row.time}}

                    </template>
                </el-table-column>
            </template>
        </cly-datatable-n>

    </cly-section>
</cly-main>